import { Descriptions, type DescriptionsProps, Button } from 'antd'
import { PreviewWord } from '@/desktop/components/words'
import { CoverPanel } from '@/desktop/views/app/cover-panel'
import { type Task, Status, statusColors, Target } from '../logics'
import { TargetGroups } from './target-groups'
import { TargetQywxs } from './target-qywxs'
import { TargetTags } from './target-tags'

export function Detail({
  task,
  onClose,
  edit,
}: {
  task: Task
  onClose: () => void
  edit: () => void
}) {
  const items: DescriptionsProps['items'] = [
    {
      key: 'name',
      label: '任务名称',
      children: task.name,
    },
    {
      key: 'status',
      label: '任务状态',
      children: <span css={{ color: statusColors[task.status] }}>{Status[task.status]}</span>,
      span: 2,
    },
    {
      key: 'created',
      label: '创建时间',
      children: task.created.format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      key: 'created',
      label: '开始时间',
      children: task.startAt?.format('YYYY-MM-DD HH:mm:ss') ?? '立刻开始',
    },
    {
      key: 'delay',
      label: '消息间隔',
      children: `${task.delay}秒`,
    },
    {
      key: 'targetType',
      label: '群发类型',
      children: task.targetType,
      span: 3,
    },
    task.targetType === Target.群
      ? {
          key: 'groups',
          label: '目标群聊',
          children: <TargetGroups task={task} />,
          labelStyle: { paddingTop: '4px' },
          contentStyle: { overflow: 'hidden' },
          span: 3,
        }
      : null,
    task.targetType === Target.标签客户 || task.targetType === Target.全部客户
      ? {
          key: 'qywxs',
          label: '群发企微',
          children: <TargetQywxs task={task} />,
          contentStyle: { overflow: 'hidden' },
          span: 3,
        }
      : null,
    task.targetType === Target.标签客户
      ? {
          key: 'tags',
          label: '客户标签',
          children: <TargetTags task={task} />,
          contentStyle: { overflow: 'hidden' },
          span: 3,
        }
      : null,
    {
      key: 'content',
      label: '消息内容',
      children: <div>
        {task.content.map((word, index) => <PreviewWord key={index} word={word} css={s.word} />)}
      </div>,
      labelStyle: { paddingTop: '5px' },
      span: 3,
    },
  ].filter((v): v is Exclude<typeof v, null> => v !== null)

  function editAndClose() {
    edit()
    onClose()
  }

  return <CoverPanel title={'任务详情 #' + task.id} onClose={onClose}>
    <div css={s.wrap}>
      {task.status === Status.未开始 ? (
        <header css={{ marginBottom: '20px' }}>
          <Button type="primary" onClick={editAndClose}>
            编辑
          </Button>
        </header>
      ) : null}

      <Descriptions css={s.detail} items={items} bordered />
    </div>
  </CoverPanel>
}

const s = {
  wrap: css`
    flex: 1;
    margin-top: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 20px;
  `,
  detail: css`
    max-width: 1200px;
    .ant-descriptions-item-label {
      flex-shrink: 0;
    }
  `,
  word: css`
    max-width: 500px;
    & > :first-child {
      width: auto;
    }
    &:not(:last-child) {
      margin-bottom: 8px;
    }
  `,
  targets: css`
    width: 100%;
    overflow: hidden;
  `,
}
